<template>
  <a-row :gutter="[16, 16]" class="product_list">
    <a-col :span="4" style="height: 270px;" v-for="item in list" :key="item.product_id" @click="openDetail(item)">
      <a-card hoverable style="width: 100%">
        <template #cover>
          <img alt="example" height="200" :src="item.image" />
        </template>
        <a-card-meta>
          <template #description>
            <div class="desc">
              <div class="title">
                <a-tag color="orange" v-if="[1, 2, 3].includes(item.mark)">{{ formatMark(item.mark) }}</a-tag>
                {{ item.name }}
              </div>
              <div style="display: flex;align-items: flex-end;">
                <div class="current_price">
                  ￥{{ item.current_price ? Number(item.current_price).toFixed(2) : Number(item.price).toFixed(2) }}
                </div>
                <div class="price" v-if="item.current_price">
                  ￥{{ Number(item.price).toFixed(2) }}
                </div>
              </div>
            </div>
          </template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col :span="4" style="height: 270px;" v-for="item in (line * 6 - list.length)">
    </a-col>
  </a-row>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter();
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  line:{
    type:Number,
    default:2
  }
})
function formatMark(mark) {
  if (mark === 1) {
    return '新品'
  } else if (mark === 2) {
    return '招牌'
  } else if (mark === 3) {
    return '推荐'
  } else {
    return '推荐'
  }
}

function openDetail(item){
  router.push({
    name:'Detail',
    query:{
      id:item.product_id
    }
  })
}
</script>

<style lang="less" scoped>
.product_list {
  padding: 30px 0;

  :deep(.ant-card-body) {
    padding: 0;
  }

  .desc {
    padding: 10px;

    .title {
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      color: black;
      white-space: nowrap;
      /* 禁止换行 */
      overflow: hidden;
      /* 隐藏溢出内容 */
      text-overflow: ellipsis;
      /* 显示省略号 */
      display: flex;
      align-items: center;
    }

    .current_price {
      color: #ff5000;
      font-size: 18px;
    }

    .price {
      margin-left: 5px;
      text-decoration: line-through;
    }
  }
}
</style>